<template>
  <div class="table-list-container">
    <TableList
      :columns="columns"
      :pagination="paginationMixin"
      :data-source="dataSource"
      :row-key="keyTabs"
      :loading="loading"
      @change="handleTableChange"
      @href-click="handleRouterClick"
    />
  </div>
</template>

<script>
import TableList from './tableList.vue';
import mixinTable from '@/mixins/mixin-table.js';
import ColumnsMixin from './mixin';

import { postMyAgentList } from '@/api/workbBench.js';

export default {
  components: {
    TableList,
  },
  mixins: [mixinTable, ColumnsMixin],
  props: {
    keyTabs: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      dataSource: [],
      loading: false,
    };
  },

  computed: {
    columns() {
      const columns = [
        {
          // align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          // align: 'center',
          title: '模块',
          dataIndex: 'bizModuleName',
          key: 'bizModuleName',
          width: 100,
          ellipsis: true,
        },
        {
          // align: 'center',
          title: '申请名称',
          dataIndex: 'applicationName',
          key: 'applicationName',
          width: 200,
          ellipsis: true,
          scopedSlots: {
            customRender: 'applicationName',
          },
        },
        {
          // align: 'center',
          title: '当前状态',
          dataIndex: 'currStatus',
          key: 'currStatus',
          width: 80,
          ellipsis: true,
          customRender: text => this.stateOptions[text],
        },
        {
          // align: 'center',
          title: '当前节点',
          dataIndex: 'nodeName',
          key: 'nodeName',
          width: 80,
          ellipsis: true,
        },
        {
          // align: 'center',
          title: '上个节点提交人',
          dataIndex: 'lastNodeSubmitter',
          key: 'lastNodeSubmitter',
          width: 120,
          ellipsis: true,
        },
        {
          // align: 'center',
          title: '上个节点提交时间',
          dataIndex: 'lastNodeTime',
          key: 'lastNodeTime',
          width: 120,
          ellipsis: true,
        },
        {
          // align: 'center',
          title: '申请人',
          dataIndex: 'applicantName',
          key: 'applicantName',
          width: 80,
          ellipsis: true,
        },
        {
          // align: 'center',
          title: '申请时间',
          dataIndex: 'applicantTime',
          key: 'applicantTime',
          width: 80,
          ellipsis: true,
        },
      ];
      return columns;
    },
  },
  watch: {
    keyTabs: {
      handler(newVal) {
        newVal === '1' && this.getMyAgentList();
      },
    },
    immediate: true,
  },
  created() {
    this.getMyAgentList();
  },

  methods: {
    // 我的待办
    async getMyAgentList() {
      const params = {
        current: this.paginationMixin.current,
        pageSize: this.paginationMixin.pageSize,
      };

      try {
        this.loading = true;
        const res = await postMyAgentList(params);
        this.dataSource = res?.data?.data?.records || [];
        this.paginationMixin.total = res.data.data?.total;
        this.loading = false;
      } catch (err) {
        this.loading = false;
      }
    },
    handleTableChange(page, filters, sorter, { currentDataSource }) {
      this.paginationMixin = page;
      this.getMyAgentList();
      //   console.log(
      //     page,
      //     filters,
      //     sorter,
      //     { currentDataSource },
      //     '0000123========'
      //   );
    },
  },
};
</script>

<style lang="less" scoped>
.table-list-container {
  // margin-top: 10px;
  padding: 0 20px;
  /deep/.poros-table-middle
    > .poros-table-content
    > .poros-table-scroll
    > .poros-table-body
    > table
    > .poros-table-tbody
    > tr
    > td {
    padding: 0 7px;
  }
}
/deep/ .poros-table-thead > tr > th {
  background-color: #d1ebf7;
}
</style>
